
<template>
  <div class="task">
    <Title :title="title" />
    <div class="task_cn">
      <div class="task_btn">
        <div class="search">
          <input type="text" v-model="search" @keyup.enter="onSearch" style="width: 230px; margin-bottom: 20px" />
          <button @click="onSearch">搜索</button>
        </div>
      </div>
      <el-table :data="tableData" border class="task_table" @selection-change="handleSelectionChange" style="width: 100%">
        <el-table-column fixed type="selection" width="55"> </el-table-column>
        <el-table-column prop="add_time" label="创建时间" width="180">
          <template slot-scope="scope">
            <span>{{ scope.row.add_time | formatDated }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="explain" label="具体情形" width="250">
          <template slot-scope="scope">
            <span class="ncontent">{{ scope.row.explain }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="phone" label="联系电话" width="250"> </el-table-column>

        <el-table-column prop="state" label="状态">
          <template slot-scope="scope">
            <span>{{ scope.row.state | Twostated }}</span>
          </template>
        </el-table-column>

        <el-table-column fixed="right" label="操作" width="150">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
            <el-button type="text" size="small" style="color: #31bdce" @click="edit(scope.row)" v-if="scope.row.state == 0">编辑</el-button>
            <!-- <el-button type="text" size="small" style="color:#f56c6c" @click="deleted(scope.row)">删除</el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage1"
        :page-sizes="[12, 20, 30, 40]"
        :page-size="12"
        layout="total, prev, pager, next"
        style="text-align: right; margin-top: 15px"
        :total="totals"
      >
      </el-pagination>
    </div>
    <!-- 查看详情 -->
    <el-drawer title="我是标题" :visible.sync="drawer" :before-close="drawerClose" class="drawer" :with-header="false">
      <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" id="subOutputRank-print">
        <el-form-item label="创建时间:" prop="date">
          <p>{{ details.add_time | formatDated }}</p>
        </el-form-item>
        <el-form-item label="联系电话:" prop="phone">
          <p>{{ details.phone }}</p>
        </el-form-item>
        <el-form-item label="处理说明:" prop="company" style="color: red" v-if="bohui != ''">
          <p v-for="(item, index) in bohui" :key="index">{{ item.p_content }}</p>
        </el-form-item>
        <el-form-item label="具体情形:" prop="company">
          <p>{{ details.explain }}</p>
        </el-form-item>
        <el-form-item label="上传图片:" class="uppic">
          <el-upload action="#" list-type="picture-card" :file-list="fileList" :auto-upload="false">
            <i slot="default" class="el-icon-plus"></i>
            <div slot="file" slot-scope="{ file }">
              <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
              <span class="el-upload-list__item-actions">
                <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                  <i class="el-icon-zoom-in"></i>
                </span>
              </span>
            </div>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible" :append-to-body="true" :modal-append-to-body="false">
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>
        </el-form-item>
        <el-form-item label="上传视频:" class="uppic">
          <div class="wrap">
            <video :src="videoDate" controls="controls"></video>
          </div>
        </el-form-item>
        <div class="messages" v-if="logsd != ''">
          <h3>任务追加说明</h3>
          <div class="mess_cn" v-for="(item, index) in logsd" :key="index" :style="item.type == '102' ? 'text-align: right;' : 'text-align: left;'">
            <div :class="item.type == '102' ? 'messag mess_right' : 'messag'">
              <div class="mess_left">
                <img :src="item.icon == '' ? 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png' : item.icon" alt="" />
                <p>{{ item.add_realname }}</p>
              </div>
              <div class="user_cn">
                <span><span style="display: inline-block"></span>{{ item.p_content }}</span>
                <span style="display: inline-block; font-size: 13px; color: #333">{{ item.add_time | formatDated }}</span>
              </div>
            </div>
          </div>
        </div>
      </el-form>

      <!-- 表单提交 -->
      <div v-if="(state == 0 && userState) || (state == 1 && userState)">
        <el-form :model="form" status-icon :rules="rule" ref="form" label-width="100px" class="demo-form">
          <el-form-item label="内容:" prop="reason">
            <el-input type="textarea" v-model="form.reason"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="complete('form', 1)">镇内处理</el-button>
            <el-button type="primary" @click="submitForm('form')">上报协同处理</el-button>
            <el-button type="success" @click="complete('form')">驳回</el-button>
            <el-button @click="printContent(e)" style="float: right">打印</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-drawer>

    <!-- 清单提示 -->
    <el-dialog title="清单事项介绍" :visible.sync="centerDialogVisible" width="30%" center>
      <span>{{ ncontent }}</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { publishListOf, taskDelete, taskDetails, logsList, projectstatus, survey, userdepe, varList, projectreject, userInfo } from '@/utils/index.js'
import Title from '@/components/title.vue'
export default {
  props: ['ctype'],
  data() {
    return {
      title: '下级任务列表',
      noSubmit: true,
      searchBtn: '',
      centerDialogVisible: false,
      search: '',
      tableData: [],
      currentPage1: 1,
      currentPage2: 2,
      currentPage3: 3,
      currentPage4: 4,
      drawer: false,
      bohui: [],
      // 详情
      ruleForm: {
        username: '',
        type: '',
        date: '',
        company: '',
      },
      rules: {},
      form: {
        radio: '3',
        reason: '',
      },
      rule: {},
      optionsd: [],
      options: [],
      dialogVisible: false,
      dialogImageUrl: '',
      fileList: [],
      videoDate: [],
      // 任务id
      rowId: '',
      // 分页
      totals: 0,
      details: [],
      lookId: '',
      logsd: [],
      ncontent: '',
      detailed: [],
      isNaN: false,
      state: '',
      userId: '',
      userState: false,
    }
  },
  watch: {},
  components: {
    Title,
  },
  created() {
    userInfo().then((res) => {
      console.log(res)
      // if(res.data.member == 0){
      //     this.isNaN = true
      // }else{
      //     this.isNaN = false
      // }
      this.userId = res.data.userid
      console.log(this.isNaN)
    })
    varList().then((res) => {
      this.tableData = res.data.data
      this.totals = res.data.total
      console.log(res)
    })
  },
  methods: {
    // 市镇联动
    depedNow(val) {
      console.log(val)
      if (val == '1') {
        userdepe({
          type: '101',
        }).then((res) => {
          this.team = res.data
        })
      } else if (val == '2') {
        userdepe({
          type: '201',
        }).then((res) => {
          this.team = res.data
        })
      }
    },
    printContent() {
      let subOutputRankPrint = document.getElementById('subOutputRank-print')
      console.log(subOutputRankPrint.innerHTML)
      let newContent = subOutputRankPrint.innerHTML
      let oldContent = document.body.innerHTML
      document.body.innerHTML = newContent
      window.print()
      window.location.reload()
      document.body.innerHTML = oldContent
      return false
    },
    // 清单内容
    openDesc(id) {
      console.log(id)
      this.ncontent = id.contents
      this.centerDialogVisible = true
    },
    drawerClose() {
      this.drawer = false
      this.fileList = []
      this.userState = false
    },
    // 搜索
    onSearch() {
      varList({
        name: this.search,
      }).then((res) => {
        this.tableData = res.data.data
        console.log(res)
      })
    },
    // 表格操作
    handleClick(row) {
      console.log(row)
      this.lookId = row.id
      this.drawer = true
      this.details = []
      this.fileList = []
      // 对话框
      logsList({
        p_id: row.id,
        type: '101',
      }).then((res) => {
        console.log(res)
        this.logsd = res.data.data
      })
      if (this.userId != row.add_user) {
        this.userState = true
        survey({
          id: row.id,
          state: '1',
        })
      }

      projectstatus({
        id: row.id,
      }).then((res) => {
        res.data.forEach((item) => {
          this.detailed.push(item.explain)
        })
        console.log(this.detailed)
      })

      // this.dialogImageUrl = 'https://gifts-1027411-pic45.websiteonline.cn/upload/bb.jpg'
      logsList({
        p_id: row.id,
        type: '201',
      }).then((res) => {
        console.log(res.data.data)
        this.bohui = res.data.data
      })
      taskDetails({
        id: row.id,
      }).then((res) => {
        console.log(res)
        this.details = res.data
        this.state = res.data.state
        // this.fileList = res.data[0].pic
        let lists = res.data.pic
        lists.forEach((item) => {
          this.fileList.push({ url: item.src })
        })
        if (res.data.video.length > 0) {
          this.videoDate = res.data.video[0].src
        }
        if (res.data.state == '3' || res.data.state == '2') {
          this.noSubmit = false
        } else {
          this.noSubmit = true
        }
      })
    },
    edit(row) {
      // console.log(row);
      this.rowId = row.id
      // localStorage.clear();
      // window.localStorage.setItem('rowid',row.id)
      this.$router.push({ path: '/edit_task', query: { rowId: row.id } })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 发布
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$router.push({ path: '/edit_task', query: { rowId: this.lookId } })
        } else {
          // console.log('error submit!!');
          return false
        }
      })
    },
    // 任务完成
    complete(formName, state) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (state == 1) {
            this.form.reason = '您好，您的问题属于本镇处理范围，请耐心等待回复，谢谢！'
            this.$confirm('确定执行此操作吗？', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning',
              center: true,
            })
              .then(() => {
                projectreject({
                  id: this.lookId,
                  content: '您好，您的问题属于本镇处理范围，请耐心等待回复，谢谢！',
                }).then((res) => {
                  // console.log(res)
                  if (res.code == '0') {
                    this.$message.closeAll()
                    this.$message.success('提交成功')
                    setTimeout(() => {
                      this.drawer = false
                      this.score = true
                    }, 800)
                  } else {
                    this.$message.closeAll()
                    this.$message.warning(res.msg)
                  }
                })
              })
              .catch(() => {
                this.form.reason = ''
              })
          } else {
            projectreject({
              id: this.lookId,
              content: this.form.reason,
            }).then((res) => {
              // console.log(res)
              if (res.code == '0') {
                this.$message.closeAll()
                this.$message.success('驳回成功')
                setTimeout(() => {
                  this.drawer = false
                  this.score = true
                }, 800)
              } else {
                this.$message.closeAll()
                this.$message.warning(res.msg)
              }
            })
          }
        } else {
          // console.log('error submit!!');
          return false
        }
      })
    },
    // 删除
    deleted(val) {
      console.log(val)
      this.$confirm('此操作将永久删除该任务, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true,
      })
        .then(() => {
          taskDelete({
            id: val.id,
          }).then((res) => {
            if (res.code == '0') {
              this.$message({
                type: 'success',
                message: '删除成功!',
              })
              publishListOf({
                ctype: this.ctype,
              }).then((res) => {
                this.tableData = res.data.data
              })
            } else {
              this.$message({
                type: 'warning',
                message: res.msg,
              })
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      varList({
        ctype: this.ctype,
        page: val,
      }).then((res) => {
        this.tableData = res.data.data
      })
    },
    // 上传视频
    handlePictureCardPreview(file) {
      console.log(file)
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
  },
}
</script>

<style lang="scss" scoped>
.task_btn {
  padding: 0 15px;
}
.task_btn button {
  background-color: #31bdce;
  color: white;
}
.search {
  float: right;
  font-size: 0;
  // border: 1px solid #ccc;
}
.search input {
  height: 34px;
  vertical-align: top;
  border: 0;
  outline: none;
  padding: 0 7px;
  font-size: 14px;
  border: 1px solid #ccc;
}
.search button {
  height: 36px;
  border: 0;
  padding: 0 20px;
}
.search button:hover {
  cursor: pointer;
}
.task_table::v-deep {
  margin-top: 30px;
  box-sizing: border-box;
  .el-table_1_column_1 {
    .cell {
      text-align: center;
    }
  }
}

.el-pagination {
  font-weight: 500;
}
.drawer::v-deep {
  .el-drawer {
    width: 50% !important;
  }
}
.demo-ruleForm::v-deep {
  margin-top: 15px;
  background-color: white;
  padding: 40px 30px 20px 30px;
  border-bottom: 1px solid #ccc;
  .el-form-item {
    display: inline-block;
    width: 500px;
    margin-bottom: 30px;
    vertical-align: top;
  }
  .el-form-item__label {
    width: 130px !important;
  }
  .el-form-item__content {
    margin-left: 130px !important;
  }
  .uppic {
    display: block;
    width: 100%;
    .el-upload-list__item {
      div {
        height: 146px;
      }
    }
  }
  .el-select {
    width: 100%;
  }
  .el-upload {
    display: none;
  }
}
.wrap {
  width: 70%;
  position: relative;
  // padding-bottom:62%;    /*需要用padding来维持16:9比例,也就是9除以16*/
  height: 400px;
  video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}
.demo-form::v-deep {
  width: 90%;
  padding-top: 20px;
  .el-textarea__inner {
    height: 100px;
  }
}
.searchclass::v-deep {
  width: 100px;
  height: 38px;
  margin: 0 7px;
  .el-input {
    height: 38px;
  }
  .el-input__inner {
    height: 38px;
    line-height: 38px;
  }
}
.score::v-deep {
  // text-align: center;
  .el-rate__item:nth-child(5) {
    display: none;
  }
  .el-rate__item:nth-child(4) {
    display: none;
  }
}

.el-dialog__wrapper {
  right: 200px;
  left: 100px;
  top: 100px;
}
.ncontent {
  width: 225px;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ncontent:hover {
  cursor: pointer;
}
.messages {
  padding: 0 100px;
  h3 {
    text-align: center;
  }
}
.mess_cn {
  margin-top: 20px;
  overflow: auto;
  .mess_left {
    float: left;
    width: 60px;
    text-align: center;
    vertical-align: middle;
    img {
      width: 40px;
      height: 40px;
      object-fit: cover;
    }
    p {
      font-size: 12px;
    }
  }
  .user_cn {
    font-size: 12px;
    float: left;
    border: 1px solid #478bf1;
    border-radius: 10px;
    padding: 10px 20px;
    vertical-align: middle;
    margin-right: 10px;
    box-shadow: 0px 0px 5px #ccc;
    margin-left: 20px;
    span:nth-child(1) {
      font-size: 14px;
      padding-bottom: 10px;
    }
    span {
      display: block;
      font-size: 13px;
    }
  }
  .mess_right {
    float: right;
    .mess_left {
      float: right;
    }
    .user_cn {
      margin-right: 20px;
    }
  }
}
.message {
  padding: 10px 20px;
  padding-bottom: 60px;
  h3 {
    font-size: 16px;
    text-align: center;
    margin-bottom: 20px;
  }
}
.van-image {
  z-index: 9999;
}
.el-select-dropdown__item {
  width: 250px !important;
}
.task_cn {
  background: white;
  margin-top: 15px;
  padding: 30px 50px;
}
</style>